
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>
    <style>
        html, body, h1, form, fieldset, legend, ol ,li{
            padding:0;
            margin:0;
        }
        ol{
            list-style:none;
        }
        body{
            background:#fff;
            color:#111;
            padding:20px;
        }
        form#payment{
            background:#425ec5;
            -webkit-border-radius:5px;
            border-radius:5px;
            padding:20px;
            width:600px;
        }
        form#payment fieldset{
            border:none;
            margin-bottom:10px;
        }
        form#payment fieldset:last-of-type{ margin-bottom:0; }
        form#payment legend{
            color:#384313;
            font-size:16px;
            font-weight:bold;
            padding-bottom:10;
            text-shadow:0px 1px 1px #425ec5;
        }
        form#payment > fieldset>legend:before{

            counter-increment:fieldsets;
        }
        form#payment fieldset fieldset legend{
            color:#111;
            font-size:13px;
            font-weight:normal;
            padding-bottom:0;
        }
        form#payment ol li{
            background:#425ec5;
            background:rgba(255, 255, 255, 0.3);
            border:#e3ebc3;
            border-color:rgba(255, 255, 255, 0.6);
            border-style:solid;
            border-width:2px;
            -webkit-border-radius:5px;
            line-height:30px;
            padding:5px 10px;
            margin-bottom:2px;
        }
        form#payment ol ol li{
            bakcground:none;
            border:none;
            float:left;
        }
        form#payment label{
            float:left;
            font-size:13px;
            width:110px;
        }
        form#payment fieldset fieldset label{
            background:none no-repeat left 50%;
            line-height:20px;
            padding:0 0 0 30px;
            width:auto;
        }
        form#payment fieldset fieldset label:hover{cursor:pointer;}
        form#payment input:not([type=radio]), form#payment textarea{
            background:#fff;
            border:#fc3 solid 1px;
            -webkit-border-radius:3px;
            outline:none;
            padding:5px;
        }
    </style>
</head>
<body>
        <div id="app">

           <!-- 系统编号: <input type="text"  v-model="pojo.codes">
            <br>
            系统名称: <input type="text" v-model="pojo.iname">
            <br>
            IP地址: <input type="text" v-model="pojo.ipAddress">
            <br>
            IP地址描述: <input type="text" v-model="pojo.ipDescribe">
            <br>
            <br>
            电话: <input type="text" v-model="pojo.phone"><br>
            邮件: <input type="text" v-model="pojo.email">
            <br>
            管理员: <select v-model="pojo.uid">
            <option value="">请选择</option>
            <option v-for="d in users" :value="d.uid">{{d.uname}}</option>
        </select>
            <input type="button" value="添加" @click="add()">-->
            <form id=payment>
                <fieldset>
                    <legend>用户详细信息</legend>
                    <ol>
                        <li>
                            <label for="username">用户姓名：</label>
                            <input type="text" v-model="pojo.username" id="username"  required>
                        </li>
                        <li>
                            <label for="password">用户密码：</label>
                            <input type="password"  id="password" v-model="pojo.password">
                        </li>
                    </ol>
                    <input type="button" @click="add()" value="提交">

                </fieldset>
            </form>
        </div>
<script>
    new Vue({
        el:"#app",
        data:{
            pojo:{},
        },
        created(){

        },
        methods:{
           add(){
                 axios.post("/user/add", this.pojo).then(res => {
                     alert('添加成功')
                     location.href="user.html"
                    })
                },
        }
    })
</script>
</body>
</html>